<template>
  <div class="detail-form-tab">
     <div
     class="detail-form-tab-con"
     v-for="(item, index) in msg2" :key="index"
     :class="{'detail-tab-active': tabIdx2 === index}"
     @click="detailTabChange(index)"
     >
     {{item}}</div>
  </div>
</template>

<script>
export default {
  props: {
    msg2: Array,
    tabIdx2:number
  },
  data () {
    return {
    }
  },

  methods: {
    detailTabChange (index) {
      this.$emit('footTabChange', index)
    }
  }
}
</script>

<style scoped>
.detail-form-tab{
  display: flex;
  font-size: 28px;
  padding-bottom: 30px;
}
.detail-form-tab-con{
  font-size: 28px;
  border:2px solid #ccc;
  border-radius:30px;
  padding: 17px 30px;
  margin-right: 16px;
  color: #4d4d4d;
}
</style>
